﻿
@{
    ViewBag.Title = "Index";
}

<h2>学生信息显示</h2>
<hr />
<a href="/Student/AddStudent">添加学生</a>
<table class="table table-bordered">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>出生日期</th>
        <th>头像</th>
    </tr>
    <tbody id="studentlist">
    </tbody>
</table>
<hr />
<a href="#" onclick="Page(0)">首页</a>
<a href="#" onclick="Page(-1)">上一页</a>
<a href="#" onclick="Page(1)">下一页</a>
<a href="#" onclick="Page(-2)">尾页</a>
<input type="text" style="width:50px" id="setindex" onfocusout="SetPIndex()">
<select id="setpsize" onchange="SetPSize()">
    <option>2</option>
    <option>3</option>
    <option>5</option>
    <option>10</option>
</select>


<span id="indexlist"></span>


<script src="~/Scripts/jquery-3.4.1.js"></script>
<script>
    $(function () {
        //调用查询方法
        GetStudentList()
    })

    //通过下拉框设置每页面显示几条数据
    function SetPSize() {
        pSize = $("#setpsize").val();

        //清空页码
        $("#indexlist").html("")
        //清空表数据
        $("#studentlist").html("");
        //查询学生信息
        GetStudentList();
    }

    //通过输入框设置页码
    function SetPIndex()
    {
        //取出输入的页码，设置新的页码
        pIndex = $("#setindex").val()

        if (pIndex < 1 || pIndex > pCount) {
            return;
        }

        //清空页码
        $("#indexlist").html("")
        //清空表数据
        $("#studentlist").html("");
        //查询学生信息
        GetStudentList();
    }



    var pIndex = 1; //设置初始页码
    var pSize = 2;  //设置初始每页显示几条
    var pCount = 0; //最大多少页

    //翻页方法
    function Page(index) {
        if (index == 0) {
            pIndex = 1;
        }
        if (index == 1 || index == -1) {
            //已经是第一页,点击了上一页就不要减了
            if (pIndex == 1 && index == -1) {
                return;
            }

            //已经是最后一页了，点击的是下一页，就不要加了
            if (pIndex == pCount && index == 1) {
                return;
            }


            pIndex += index;
        }
        if (index == -2) {
            pIndex = pCount;
        }

        //清空页码
        $("#indexlist").html("")

        //清空表数据
        $("#studentlist").html("");
        //查询学生信息
        GetStudentList();
    }

    //点击页码跳转页面
    function SetPageIndex(index) {
        pIndex = index;
        
        //清空页码
        $("#indexlist").html("")

        //清空表数据
        $("#studentlist").html("");
        //查询学生信息
        GetStudentList();
    }


    //分页查询学生信息
    function GetStudentList() {
        $.ajax({
            type: 'get',
            contentType:'json',
            url: '/Student/GetStudentList',
            data: { pageIndex: pIndex, pageSize: pSize },
            success: function (res) {
                //把获取的数据显示出来
                $(res.Data).each(function (index, item) {
                    //拼接行

                    debugger
                    var tr = "";
                    tr += " <tr>                     ";
                    tr += "     <td>" + item.Id + "</td>        ";
                    tr += "     <td>" + item.Name + "</td>        ";
                    tr += "     <td>" + (item.Sex? '男':'女') + "</td>        ";
                    tr += "     <td>" + formatDate(item.Birthday) + "</td>     ";

                    tr += "     <td><img style='width: 100px; height: 100px'  src='http://localhost:52633" + item.HeaderImg + "' /></td>     ";
                    tr += " </tr>                    ";
                    //追加行
                    $("#studentlist").append(tr);
                })
                //计算出一共要分多少页,总记录数队以每页显示几条
                pCount = Math.ceil(res.Count / pSize);

                //显示出所有可以使用的页码
                for (var i = 1; i <= pCount; i++) {

                    if (i == pIndex) {
                        $("#indexlist").append("<a'>" + i + "</a>    ")

                    }
                    else {
                        $("#indexlist").append("<a href='#' onclick='SetPageIndex(" + i + ")'>" + i + "</a>    ")

                    }
                }

                
            }
        });
    }

    function formatDate(date)
    {
        var w = new Date(date.substring(6, (date.length - 2)) * 1)
        return w.getFullYear()+""+ "年" + (w.getMonth()+1) + "月" + w.getDate() + "日"
    }

</script>



